<template>
  <main>
    <div id="myCarousel" class="carousel slide" data-bs-ride="carousel" style="margin-bottom: 4rem">
      <div class="carousel-indicators">
        <button
          type="button"
          data-bs-target="#myCarousel"
          data-bs-slide-to="0"
          class="active"
          aria-current="true"
          aria-label="Slide 1"
        ></button>
        <button
          type="button"
          data-bs-target="#myCarousel"
          data-bs-slide-to="1"
          aria-label="Slide 2"
        ></button>
        <button
          type="button"
          data-bs-target="#myCarousel"
          data-bs-slide-to="2"
          aria-label="Slide 3"
        ></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <div class="bg bg1"></div>
          <div class="container">
            <div class="carousel-caption text-start">
              <h1>欢迎来到我的主题博客空间</h1>
              <p>以宝可梦为主题打造了这个博客</p>
              <p>
                <button class="btn btn-lg btn-primary" @click="emit('done', 0)">回到首页</button>
              </p>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="bg bg2"></div>
          <div class="container">
            <div class="carousel-caption">
              <h1>我的博客我做主</h1>
              <p>记录工作中碰到的疑难杂症</p>
              <p>
                <button class="btn btn-lg btn-primary" @click="emit('done', 2)">查看笔记</button>
              </p>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="bg bg3"></div>
          <div class="container">
            <div class="carousel-caption text-end">
              <h1>这就是我的舞台</h1>
              <p>展现个人的学习工作经历</p>
              <p>
                <button class="btn btn-lg btn-primary" @click="emit('done', 3)">关于在下</button>
              </p>
            </div>
          </div>
        </div>
      </div>
      <button
        class="carousel-control-prev"
        type="button"
        data-bs-target="#myCarousel"
        data-bs-slide="prev"
      >
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button
        class="carousel-control-next"
        type="button"
        data-bs-target="#myCarousel"
        data-bs-slide="next"
      >
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
  </main>
</template>

<script setup lang="ts">
  const emit = defineEmits<{
    (e: 'done', active: number): void
  }>()
</script>

<style scoped>
  .nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .bg {
    width: 100%;
    height: 350px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 30%;
  }

  .bg1 {
    background-image: url('@/assets/img/pokemon/pokemon-header-1.jpeg');
  }

  .bg2 {
    background-image: url('@/assets/img/pokemon/pokemon-header-2.jpeg');
  }

  .bg3 {
    background-image: url('@/assets/img/pokemon/pokemon-header-3.jpeg');
  }
</style>
